

.date-picker {
  // 公共默认样式
  .date-picker-controller {
      position: relative;
    & > input {
      box-sizing: border-box;
      border: $input-normal-border-width solid $input-normal-border-color;
      display: inline-block;
      width: 100%;
      color: $text-color;
      font-size: $font-size;
      font-family: '微软雅黑';
      padding-left: $input-padding-x;
      padding-right: $input-padding-x;
      outline: none;
      height: $input-normal-height;
      line-height: $input-normal-height;
      &:hover {
        border-color: #a8a8a8;
        color: $text-color;
      }
    }
    & > .icon {
      position: absolute;
      right: 10px;
      line-height: $input-normal-height;
      top: 50%;
      margin-top: -$input-normal-height/2;
      color: $datepicker-date-icon-color;
    }
  }
  //xSmall属性样式
  &.date-picker-xs {
    .date-picker-controller {
      & > input {
        height: $input-xs-height;
        line-height: $input-xs-height;
      }
      & > .icon {
        height: $input-xs-height;
        line-height: $input-xs-height;
        margin-top: -$input-xs-height/2;
      }
    }
  }
  //small属性样式
  &.date-picker-sm {
    .date-picker-controller {
      & > input {
        height: $input-sm-height;
        line-height: $input-sm-height;
      }
      & > .icon {
        height: $input-sm-height;
        line-height: $input-sm-height;
        margin-top: -$input-sm-height/2;
      }
    }
  }
  //large属性样式
  &.date-picker-lg {
    .date-picker-controller {
      & > input {
        height: $input-lg-height;
        line-height: $input-lg-height;
      }
      & > .icon {
        height: $input-lg-height;
        line-height: $input-lg-height;
        margin-top: -$input-lg-height/2;
      }
    }
  }
  //xLarge属性样式
    &.date-picker-xl {
      .date-picker-controller {
      & > input {
        height: $input-xl-height;
        line-height: $input-xl-height;
      }
      & > .icon {
        height: $input-xl-height;
        line-height: $input-xl-height;
        margin-top: -$input-xl-height/2;
      }
    }
  }
}
//  字体颜色
.rc-calendar {
  border-color: #ddd;
  a {
    color: $datepicker-normal-color;
    text-decoration: none;
  }
  // 使用图标
  &-clear-btn {
    @extend .icon;
    @extend .icon-close-thin;
    font-size: $default-font-size;
    opacity: .2;
  }
  &-clear-btn:hover {
    color: $primary-color;
    opacity: 1;
    filter: alpha(opacity = 100);
  }
}
.rc-calendar-last-month-cell .rc-calendar-date, .rc-calendar-next-month-btn-day .rc-calendar-date {
  color: $datepicker-gray-color;
}
.rc-calendar-year-panel-last-decade-cell .rc-calendar-year-panel-year, .rc-calendar-year-panel-next-decade-cell .rc-calendar-year-panel-year {
  color: $datepicker-gray-color;
}
.rc-calendar-date {
  color: $datepicker-normal-color;
  &:hover {
    background: $background-color;
    color: $primary-color;
  }
}
.rc-calendar-disabled-cell .rc-calendar-date{
  &:hover{
    color: #bcbcbc;
  }
}
//  日期选择颜色
.rc-calendar-selected-date .rc-calendar-date {
  background: $primary-color;
  color: $background-white-color;
  &:hover {
    background: $background-color;
    color: $primary-color;
  }
}
.rc-calendar-selected-day .rc-calendar-date {
  background: $primary-color;
  color: $background-white-color;
}
.rc-calendar-today .rc-calendar-date {
  border: 0;
  background: $background-color;
  color: $primary-color;
}
// 日期页 年份和左右按钮颜色
.rc-calendar-year-select:hover,.rc-calendar-month-select:hover,.rc-calendar-day-select {
  &:hover {
    background: $background-color;
  }
}
.rc-calendar-prev-month-btn,
.rc-calendar-next-month-btn,
.rc-calendar-prev-year-btn,
.rc-calendar-next-year-btn {
  &:hover {
    color: $datepicker-header-hover-color;
  }
}
//  月份选择颜色
.rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
  background: $datepicker-selected-background-color;
  color:  $datepicker-normal-color;
  &:hover {
      background: $datepicker-hover-color;
      color: $datepicker-normal-color;
  }
}
.rc-calendar-month-panel-cell .rc-calendar-month-panel-month {
  color: $datepicker-normal-color;
  &:hover {
    background: $datepicker-hover-color;
  }
}
// 月份页  月份和左右按钮颜色
.rc-calendar-month-panel-header {
  > a {
    &:hover {
      color: $datepicker-header-hover-color;
    }
  }
}
//  年份选择颜色
.rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
  background: $datepicker-selected-background-color;
  color: $datepicker-normal-color;
  &:hover {
    background: $datepicker-hover-color;
    color: $datepicker-normal-color;
  }
}
.rc-calendar-year-panel-year {
  &:hover {
    background: $datepicker-hover-color;
  }
}
//  年份页  年份和左右按钮颜色
.rc-calendar-year-panel-header {
  > a {
    &:hover {
      color: $datepicker-header-hover-color;
    }
  }
}
//  年份范围选择颜色
.rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
  background: $datepicker-selected-background-color;
  color: $datepicker-normal-color;
}
.rc-calendar-decade-panel-cell .rc-calendar-decade-panel-decade {
  &:hover {
    background: $datepicker-hover-color;
    color: $datepicker-normal-color;
  }
}
// 年份范围选择 左右按钮颜色
.rc-calendar-decade-panel-header {
  > a {
    &:hover {
      color: $datepicker-header-hover-color;
    }
  }
}
// today 颜色
.rc-calendar-today-btn, .rc-calendar-ok-btn, .rc-calendar-time-picker-btn {
  padding-left: 0px;

  &:hover {
    cursor: pointer;
    color: $primary-color;
  }
}
.rc-time-picker-panel-select {
  overflow: hidden;
  position: relative;

  &::-webkit-scrollbar{
    width:8px;
    height:8px;
  }
  &::-webkit-scrollbar-track{
    background: #f6f6f6;
    border-radius:4px;
  }
  &::-webkit-scrollbar-thumb{
    background: #c4c4c4;
    border-radius:4px;

    &:hover{
      background: #c4c4c4;
    }
  }

  &:hover {
    overflow-y: scroll;
    overflow-x: hidden;

    li {
      padding-left: 4px;
    }
  }

  li{
    &:hover{
      background: $background-color;
      color: $primary-color;
    }

    &.rc-time-picker-panel-select-option-selected{
      color: $primary-color;
    }
  }
}
